<template>
	<div>
		<h3>求和为：{{ sum }}</h3>
		<h3>第二个求和为：{{ sum2 }}</h3>
		<button @click="addSum">求和+1</button>
		<button @click="addSum2">第二个求和+1</button>
		<h3>车：{{ car }}</h3>
		<h3>第二辆车：{{ car2 }}</h3>
		<button @click="editL">Lowlevel+100</button>
		<button @click="editB">品牌变化</button>
		<button @click="editL2">第二个Lowlevel+100</button>
		<button @click="editB2">第二个品牌变化</button>
	</div>
</template>

<script setup lang="ts" name="App">
	import {ref,reactive,readonly,shallowReadonly} from 'vue'
	let sum=ref(0)
	let sum2=readonly(sum)
	let car=reactive({
		brand:"mi",
		level:{
			low:200,
			high:500
		}
	})
	let car2=shallowReadonly(car)
	
	function addSum(){
		sum.value+=1
	}

	function addSum2(){
		sum2.value+=1
	}

	function editL(){
		car.level.low+=100
	}

	function editL2(){
		car2.level.low+=100
	}

	function editB(){
		car.brand="bba"
	}

	function editB2(){
		car2.brand="bba"
	}

</script>

<style>
	.wraper .title {
		padding: 20px;
		text-align: center;
		min-width: 610px;
	}
	.wraper .small{
		font-size: 15px;
	}
	.wraper .list-group-item {
		min-width: 230px;
	}
</style>